<template>
  <div class="myCenter">
    <div class="userBox">
      <div class="userBoxbg">
        <img src="../../assets/img/person/bg.png" alt srcset />
      </div>
      <ul class="userdetail">
        <li class="userdetail-li userImg">
          <van-image
            class="img"
            none
            width="1.20rem"
            height="1.20rem"
            fit="contain"
            :src="imgUser"
          />
          <div class="userName" v-if="isLogin">
            <p class="namep">{{user.truename}}，您好</p>
            <p class="statusp">{{vipText}}</p>
          </div>
          <div class="userName" v-else>
            <router-link tag="p" class="namep" :to="{path:'/login',query:{path:'person'}}">登录/注册</router-link>
          </div>
        </li>
        <li class="userdetail-li">
          <van-grid :border="false" :column-num="3">
            <van-grid-item>
              <div @click="qyway('qgList', { type: 1})" class="gridDiv">
                <van-image :src="icon1" />
                <p class="showText">我的求购</p>
              </div>
            </van-grid-item>
            <van-grid-item>
              <div @click="qyway('qgList', { type:0})" class="gridDiv">
                <van-image :src="icon2" />
                <p class="showText">我的供应</p>
              </div>
            </van-grid-item>
            <van-grid-item>
              <div @click="qyway('fbgq')" class="gridDiv">
                <van-image :src="icon3" />
                <p class="showText">发布供求</p>
              </div>
            </van-grid-item>
          </van-grid>
        </li>
      </ul>
    </div>

    <!-- 登录 -->
    <div class>
      <van-cell title="我的自选" :icon="img1">
        <div class="myselct" slot="right-icon">
          <span
            class="item"
            v-for="(i,index) in myselect"
            :key="index"
            @click="pricehref(i)"
          >{{i.text}}</span>
          <van-icon name="arrow" style="line-height: inherit;" />
        </div>
      </van-cell>
      <van-cell title="会员等级" :icon="img2" value-class="vip-color" :value="vipText"></van-cell>
      <van-cell title="会员有效期" :icon="img3" value-class="vip-color" :value="p_enddate"></van-cell>
      <van-cell @click="qyway('changePsd')" title="修改密码" :icon="img4">
        <van-icon slot="right-icon" name="arrow" style="line-height: inherit;" />
      </van-cell>
      <van-cell title="联系客服专员" value-class="phone-color" :icon="img5">
        <a class="phone" :href="'tel:'+vipPhone" slot="right-icon">{{vipPhone}}</a>
      </van-cell>
      <van-cell title="版本号" v-if="versonData.flag==0" value-class="phone-color" :icon="bb" :value="versonData.v"></van-cell>
      <van-cell
         v-else-if="versonData.flag==1"
        title="版本号"
        :url="versonData.ulr"
        value-class="red"
        :icon="bb"
        :value="versonData.v+'--去更新'"
      >
        <van-icon slot="right-icon" name="arrow" class="red" style="line-height: inherit;" />
      </van-cell>
    </div>

    <div class="btn-tc" v-if="isLogin" @click="logOff">退出当前账户</div>
  </div>
</template>

<script type="text/ecmascript-6">
import img1 from "../../assets/img/person/img1.png";
import img2 from "../../assets/img/person/img2.png";
import img3 from "../../assets/img/person/img3.png";
import img4 from "../../assets/img/person/img4.png";
import img5 from "../../assets/img/person/img5.png";
import bb from "../../assets/img/person/bb.png";
import imgUser0 from "../../assets/img/person/user.png";
import imgUser1 from "../../assets/img/person/woman.png";
import imgUser2 from "../../assets/img/person/man.png";
import icon1 from "../../assets/img/person/icon1.png";
import icon2 from "../../assets/img/person/icon2.png";
import icon3 from "../../assets/img/person/icon3.png";
import { loginout, getsoftversion } from "../../api/user";

export default {
  data() {
    return {
      img1,
      img2,
      img3,
      img4,
      img5,
      bb,
      imgUser: "",
      icon1,
      icon2,
      icon3,
      isLogin: false, //是否登陆
      user: {},
      myselect: [], //我的自选
      vipText: "", //vip权限
      p_enddate: "", //有效期
      vipPhone: "02150184981",
      versonData: {}
    };
  },
  computed: {
    userget() {
      return this.$store.state.loginInforXl;
    }
  },
  watch: {
    userget() {
      this.setLogin();
    }
  },
  methods: {
    pricehref(i) {
      this.$router.push({ path: `/pricepart${i.channel}`, query: { channel: i.channel ,menunameflag:"all"} });
    },
    qyway(url, query = {}) {
      if (!this.isLogin) {
        this.$toast("请登录");
        return false;
      }

      this.$router.push({ path: "/" + url, query: query });
    },
    setLogin() {
      this.user = this.$store.state.loginInforXl;
      let user = this.user;
      if (user.sex == 1) {
        this.imgUser = imgUser1;
      } else if (user.sex == 2) {
        this.imgUser = imgUser2;
      } else {
        this.imgUser = imgUser0;
      }
      this.isLogin = this.$store.state.islogin;
      if (!this.isLogin) {
        this.innitData();
        return false;
      } else {
        getsoftversion().then(res => {
          if (res.code === "0000") {
            this.versonData = res.data;
 
          } else {
            this.$toast(res.mag);
          }
        });
      }
      this.p_enddate = `至${this.user.p_enddate}`;
      this.vipPhone = this.user.csphone;
      let textArr = [];
      let viptext = [];
         if (user.is_dc == 1) {
        let obj = {
          channel: "dc",
          text: "电池"
        };
        viptext.push(obj.text);
        textArr.push(obj);
      }
      if (user.is_ts == 1) {
        let obj = {
          channel: "tcl",
          text: "炭材料"
        };
        viptext.push(obj.text);
        textArr.push(obj);
      }
   
      if (user.is_gt == 1) {
        let obj = {
          channel: "dlg",
          text: "电炉钢"
        };
        viptext.push(obj.text);
        textArr.push(obj);
      }
      this.vipText = viptext.join(",");
      this.myselect = textArr;
    },
    logOff() {
      loginout().then(res => {
        if (res.code == "0000") {
          this.$store.dispatch("acLoginInfor", {});

          this.$store.dispatch("acinit");
        } else {
          this.$toast(res.msg);
        }
      });

      // window.location.reload()
    },
    innitData() {
      this.isLogin = false; //是否登陆
      this.user = {};
      this.vipText = ""; //vip权限
      this.p_enddate = ""; //有效期
      this.vipPhone = "02150184981";
      this.myselect = [];
    }
  },
  created() {
    this.setLogin();
  }
};
</script>

<style scoped  lang="less">
.myCenter {
  min-height: 100%;
  background: #ffffff;
  padding-bottom: 1rem;
}
.userBox {
  height: 5.78rem;
  position: relative;
  .userdetail {
    width: 6.9rem;
    height: 4rem;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 0.04rem 0.6rem 0px rgba(89, 49, 5, 0.1);
    border-radius: 0.16rem;
    position: absolute;
    top: 1.48rem;
    left: 50%;
    margin-left: -3.45rem;
    .userdetail-li {
      height: 50%;
    }
    .img {
      margin-right: 0.2rem;
    }
    .userImg {
      padding: 0.4rem 0.3rem;
      display: flex;
    }
    .userName {
      display: flex;
      flex-direction: column;
      justify-content: center;
      line-height: 1.5;
    }
    .namep {
      font-size: 0.36rem;
      font-weight: bolder;
      color: rgba(21, 23, 35, 1);
    }
    .statusp {
      font-size: 0.22rem;
      color: rgba(136, 137, 141, 1);
    }
  }
  .van-grid-item,
  .van-grid {
    height: 100%;
    .van-image {
      width: 0.8rem;
      margin-bottom: 0.14rem;
    }
    .showText {
      color: rgba(110, 111, 117, 1);
    }
  }
}
.userBoxbg {
  height: 3.52rem;
}
.gridDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.phone {
  color: rgba(37, 173, 255, 1);
}
.van-cell {
  color: rgba(73, 74, 81, 1);
  padding: 15px;
}
.vip-color {
  font-size: 0.26rem;
  color: rgba(136, 137, 141, 1);
}
.btn-tc {
  width: 6.9rem;
  height: 0.9rem;
  line-height: 0.9rem;
  border-radius: 0.08rem;
  border: 0.01rem solid rgba(229, 229, 229, 1);
  background: #e5e5e5ff;
  margin: 0.3rem auto;
  font-size: 0.3rem;
  text-align: center;
  color: rgba(178, 178, 178, 1);
  opacity: 0.8;
}
.myselct {
  display: flex;
  justify-content: center;
  align-items: center;
  .item {
    padding-right: 0.4rem;
    position: relative;
    &:last-of-type {
      padding-right: 0.1rem;
      &::after {
        width: 0;
      }
    }

    &::after {
      content: "";
      display: block;
      width: 0.02rem;
      height: 0.2rem;
      background: #999999;
      position: absolute;
      top: 50%;
      margin-top: -0.1rem;
      right: 0.2rem;
    }
  }
}
.red {
  color: #d82d27 !important;
}
</style>
